:root{
	--f-progress-color: #036;
}

img[data-lazy-src] {
	display: none;
}

#model-images {
	padding:0 !important;
	position: relative;
	max-width:76.25em;
	margin:0 auto;

	&.full-view {
		max-width: unset;
		margin: 0;
	}

	.f-carousel {
		aspect-ratio: 16/9;
		margin: 0 auto;
		max-width: 122rem;
		background-color:#f5f5f5;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	#total-image-count {
		user-select: none;
		cursor: pointer;
		touch-action: manipulation;
	}
}


.f-carousel.widget {
	margin: 0 auto;
	max-width: 122rem;

	&.has-dots {
		margin-bottom:3rem;
	}

	&:not( :has(.f-carousel__viewport) ){
		aspect-ratio: 16/9;
		background-color:#f5f5f5;
		.f-carousel__slide { display:none };
	}

	.f-carousel__slide {
		aspect-ratio: 16/9;
		background-color:#f5f5f5;
		position: relative;
	}

	iframe,
	img {
		position: absolute;
		width: 100%;
		height: 100%;
		left:0;
	}

	img {
		object-fit: cover;
	}
}

.f-carousel.header {

	margin: 0;

	.f-carousel__slide {
		aspect-ratio: 16/9;
		background-color:#f5f5f5;
	}

	.f-carousel__dots{
		--f-carousel-dot-color: #fff;
		--f-carousel-dot-opacity: 0.5;
		--f-carousel-dot-hover-opacity: 0.7;
		--f-carousel-dot-width: 1rem;
		--f-carousel-dot-height: 1rem;
		--f-carousel-dots-width: 2rem;
		bottom : 0;
	}

	iframe,
	img {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* carousel overrides */
.f-carousel {
	/*
	--f-button-prev-pos: -19px;
	--f-button-next-pos: -19px;
	--f-button-width: 38px;
	--f-button-height: 38px;

	--f-button-svg-width: 16px;
	--f-button-svg-height: 16px;
	--f-button-svg-stroke-width: 2.5;

	--f-button-color: rgb(71 85 105);
	--f-button-border-radius: 50%;
	--f-button-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%),
						0 3px 7px -3px rgb(0 0 0 / 30%);
	--f-button-bg: #fff;
	--f-button-hover-bg: #f9f9f9;
	--f-button-active-bg: #f0f0f0;
	*/

	--f-button-color: rgba(255,255,255,.5);
	--f-button-hover-color: rgba(255,255,255,1);

	--f-button-svg-height: 4rem;
	--f-button-svg-width: 4rem;

	svg {
		filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
	}

	.video-image{
		display: block;
		height:100%;
		position: relative;
		width:100%;

		img {
			object-fit: cover;
			width:100%;
			position: absolute;
		}

		&::after{
			content: "\f144";
			font-family: "Font Awesome 6 Pro";
			font-weight: 900;
			left: 50%;
			position : absolute;
			top: 50%;
			color:rgba(255,255,255,.5);
			font-size: 10rem;
			transform: translate(-50%,-50%);
		}
	}
}

.has-iframe .fancybox__content {
	padding: 0;
}

@media ( max-width:767px ) {
	.f-carousel {
		--f-button-prev-pos: 0px;
		--f-button-next-pos: 0px;
		--f-button-svg-height: 3rem;
		--f-button-svg-width: 3rem;
	}
	main #content .f-thumbs img,
	main #content .f-carousel.widget :is(iframe,img) {
		height: 100% !important;
	}
}